<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="root">
<!--        动态组件,根据is中属性的变化显示不同的组件-->
        <component v-bind:is="type"></component>
<!--        <child-one v-if="type === 'child-one'"></child-one>-->
<!--        <child-two v-if="type === 'child-two'"></child-two>-->
        <button @click="handleBtnClick">Change</button>
    </div>
    <script>
        Vue.component("child-one",{
           template:'<div v-once>child-one</div>'
        });

        Vue.component("child-two",{
            template:'<div v-once>child-two</div>'
        });

        var vm = new Vue({
            el:"#root",
            data:{
                type:"child-one"
            },
            methods:{
                handleBtnClick:function () {
                    this.type =
                        this.type === 'child-one' ? 'child-two': 'child-one'
                }
            }
        })
</script>

</body>
</html>